import React, { Fragment } from 'react'
import { Switch, Route, Link, useHistory } from 'react-router-dom'
import { connect } from 'react-redux'
import routes from './routes'
import './index.scss'
import 'assets/icons/iconfont.css'
import { PageHeader, Layout, Menu, Modal, message } from 'antd'
import { OverIcon } from 'assets/icons/index'
import httpUtil from 'utils/request'

import GameoverHeader from './components/header'
import { nanoid } from 'nanoid'
import { SERVER } from 'config'
const { Header: AntdHeader, Sider, Content } = Layout

const { SubMenu } = Menu
const rootSubmenuKeys = routes.map((item) => item.name)

function GameOver(props) {
  const history = useHistory()
  // antd 只展开当前活动的导航菜单
  const [openKeys, setOpenKeys] = React.useState([''])
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1)
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1)
      setOpenKeys(keys)
    else
      setOpenKeys(latestOpenKey ? [latestOpenKey] : [])

  }

  // 重新开始
  const restart = () => {
    Modal.confirm({
      title: '点击确认后游戏数据将被清空,是否重新开始？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        httpUtil.restartGame().then(res => {
          console.log(res)
          if (!res.status) {
            localStorage.clear()

            message.success('重新开始成功，请重新登录')
            over()
          }
        })
      },
      onCancel() {
      }
    })
  }

  // 退出
  const over = () => {
    localStorage.clear()
    httpUtil.logout().then(res => {
      if (!res.status)
        history.push(`/login`)

    })
  }

  // 下载实验报告
  const downloanDoc = () => {
    httpUtil.downloadDoc().then(res => {
      if (!res.status) {
        // 地址
        const eleLink = document.createElement('a');
        eleLink.style.display = 'none';
        // 动态地址
        eleLink.href = window.location.hash + '/erpn/' + res.data.path
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);
      }
      else if (res.status && res.data != null) message.info(res.data.message)
    }
    )
  }


  return (
    <div className="game-over-wrapper">
      <Layout>
        {/* <AntdHeader> */}
        <GameoverHeader />
        {/* </AntdHeader> */}
        <Layout>
          <Sider>
            <Menu openKeys={openKeys} onOpenChange={onOpenChange} mode="inline">
              {routes.map((item) => {
                if (item.children !== undefined) {
                  return (
                    <SubMenu icon={item.icon} key={item.name} title={item.name}>
                      {item.children
                        ? item.children.map((_item) => {
                          if (_item.name == '下载实验报告') {
                            return <Menu.Item key={_item.name} onClick={downloanDoc}>
                              {_item.name}
                            </Menu.Item>
                          }
                          return (
                            <Menu.Item key={_item.name}>
                              <Link to={_item.path}>{_item.name}</Link>
                            </Menu.Item>
                          )
                        })
                        : null}
                    </SubMenu>
                  )
                } else {
                  return (
                    <Menu.Item icon={item.icon} key={item.name}>
                      <Link to={item.path}>{item.name}</Link>
                    </Menu.Item>
                  )
                }
              })}
              <Menu.Item key='1' icon={OverIcon} onClick={restart}>重新开始</Menu.Item>
              <Menu.Item key='2' icon={OverIcon} onClick={over}>退出游戏</Menu.Item>
            </Menu>
          </Sider>
          <Content>
            <Switch>
              {routes.map((item) => {
                if (item.children !== undefined) {
                  const icon = item.icon
                  const fatherBreadcrumbName = item.name
                  return item.children.map((item) => {
                    const ItemRoute = item.route
                    return (
                      <Route key={item.path} path={item.path}>
                        <div key={nanoid()} className="nav-header">
                          <PageHeader
                            className="site-page-header"
                            onBack={() => null}
                            title={item.name}
                            backIcon={icon}
                            breadcrumb={{
                              routes: [
                                {
                                  path: item.path,
                                  key: 1,
                                  breadcrumbName: fatherBreadcrumbName
                                },
                                {
                                  path: item.path,
                                  key: 2,
                                  breadcrumbName: item.name
                                }
                              ]
                            }}
                            subTitle={item.Englishname}
                          />
                        </div>
                        <div className="content-wrapper">
                          {<item.route />}
                        </div>
                      </Route>
                    )
                  })
                }
                else {
                  return (
                    <Route key={item.path} path={item.path}>
                      <div key={nanoid()} className="nav-header">
                        <PageHeader
                          className="site-page-header"
                          onBack={() => null}
                          title={item.name}
                          subTitle={item.Englishname}
                          backIcon={item.icon}
                          breadcrumb={{
                            routes: [
                              {
                                path: item.path,
                                key: 1,
                                breadcrumbName: '主页'
                              },
                              {
                                path: item.path,
                                key: 2,
                                breadcrumbName: item.name
                              }
                            ]
                          }}
                        />
                      </div>
                      <div className="content-wrapper"> {<item.route />} </div>
                    </Route>
                  )
                }
              })}
            </Switch>
          </Content>
        </Layout>
      </Layout>
      <br />
    </div>
  )
}

export default GameOver
